<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>工单排序</title>
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
      .box{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        background-color: #fff;
        height: 50px;
      }
      .box>p{
        padding-left: 5px;
        margin:0;
        padding: 0;
        width: 35%;
        text-align: right;
      }
      .box select{
        margin:0;
        padding: 0;
        width: 50%;
        height: 20px;
      }
    </style>
</head>

<body>
  <div class="box">
    <p>请选择查询区域：</p>
    <select class="" id='sel' onchange="selChange()">
      <!-- 模板引擎 -->
    </select>
  </div>
  <div id="container" style="height:360px;margin-top:10px"></div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../script/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../script/highcharts.js"></script>
<script type="text/javascript" src="../script/highcharts-3d.js"></script>
<script type="text/template" id="itemslist">
  {{each datas as item i}}
    <option value="{{item.value}}">{{item.name}}</option>
  {{/each}}
</script>
<script type="text/javascript">
	//定义一个全局颜色数组
	var colorArr = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9','#f15c80', '#e4d354', '#8085e8','#8d4653', '#91e8e1','#000000','#560f23'];
    apiready = function() {
      ajaxrd("queryWorkPlaceList", {}, function(ret, err) {
        AddData('itemslist','sel', ret);
        selChange(ret[0].value)
      })
    }

    //设置每一个数据点的颜色值
	function SetEveryOnePointColor(chart) {
		//获得第一个序列的所有数据点
		var pointsList = chart.series[0].points;
		//遍历设置每一个数据点颜色
		for (var i = 0; i < pointsList.length; i++) {
			chart.series[0].points[i].update({
				color: {
					linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 }, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果
					stops: [
						[0, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')],
						[0.5, 'rgb(255, 255, 255)'],
						[1, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')]
					]
				}
			});
		}
	}
    function selChange(val) {
      ajaxrd("queryNoFinishOrderList", {
        cRegion: document.getElementById("sel").value || val
      }, function(ret, err) {
        var arr = []
        ret.forEach(function(item, index){
          arr.push({
            name: item.worktype,
            y: item.cnt
          })
        })
        ajaxrd("querySelfOrderList", {
          cRegion: document.getElementById("sel").value || val
        }, function(ret, err) {
          var newArr = []
          ret.forEach(function(item, index){
            newArr.push({
              name: item.displayname,
              y: item.cnt
            })
            Highcharts.chart('container', {
                chart: {
                    type: 'column',
                    options3d: {
				         enabled: true,
				         alpha: 15,
				         beta: 15,
				         depth: 110
				      }
                },
                colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00',
				 '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
                title: {
                    text: '本区域名下工单排序'
                },
                subtitle: {
                    // text: '点击可查看具体的版本数据，数据来源: <a href="https://netmarketshare.com">netmarketshare.com</a>.'
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    title: {
                        // text: '总的市场份额'
                        text: ''
                    }
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y:.1f}'
                        }
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b><br/>'
                },
                series: [{
                    // name: '浏览器品牌',
                    name: '',
                    colorByPoint: true,
                    data: newArr
                }]
            },function(chart){
            	//SetEveryOnePointColor(chart);
            });
          })
        })
      })
    }
</script>
</html>
